<section class="content-header">
    <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> 首页</a></li>
        <li><a href="#">网站管理</a></li>
        <li class="active">编辑文章</li>
    </ol>
</section>
<!-- Main content -->
<section class="content">
    <div class="jax-box">
        <div class="box-body">
            <form id="articleForm" class="form-horizontal">
                <input th:value="${article.id}" type="hidden" name="id">
                <input id="status" type="hidden" name="status">
                <input id="articleContent" th:value="${article.content}" type="hidden" name="content">
                <input id="articleContentMd" th:value="${article.contentMd}" type="hidden" name="contentMd">
                <div class="form-group">
                    <div class="col-xs-12">
                        <input type="text" th:value="${article.title}" class="form-control" id="title" name="title" placeholder="请输入文章标题" require="">
                    </div>
                </div>
                <div class="form-group form-editor">
                    <div class="col-xs-12">
                        <textarea id="articleField" th:text="${article.contentMd}"></textarea>
                    </div>
                </div>
                <div class="article-extra">
                    <div class="form-group">
                        <div class="col-lg-4  col-md-5 col-sm-6 col-xs-12  pl0">
                            <label class="control-label pl-15"  style="width: 110px;float: left" for="">文章类型:</label>
                            <div class="col-xs-6">
                                <select class="form-control" name="original" requireZero="">
                                    <option value="">请选择</option>
                                    <option value="1" th:selected="${article.original==1}">原创</option>
                                    <option value="0" th:selected="${article.original==0}">转载</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-lg-4 col-md-5 col-sm-6  col-xs-12 pl0">
                            <label class="control-label pl-15"  style="width: 110px;float: left" for="">文章分类:</label>
                            <div class="col-xs-6">
                                <select class="form-control" name="categoryId" require="">
                                    <option  value="">请选择</option>
                                    <option th:each="category:${categories}" th:value="${category.id}" th:text="${category.name}" th:selected="${article.categoryId==category.id}"></option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-xs-1" style="width: 110px">
                            <label class="control-label" for="">文章标签:</label>
                        </div>
                        <div class="tags col-md-10 col-sm-9 col-xs-11 checkbox icheck">
                            <label th:each="tag:${tags}">
                                <input class="minimal" type="checkbox"  name="tag"  th:value="${tag.id}" th:text="${tag.name}" th:checked="${#lists.contains(article.tags,tag)? true: false}">
                            </label>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-xs-1" style="width: 110px">
                            <label class="control-label" for="">文章简介:</label>
                        </div>
                        <div class="col-lg-6  col-sm-8 col-xs-7">
                            <textarea th:text="${article.description}" rows="3" type="text" class="form-control" name="description" require=""></textarea>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-xs-1" style="width: 110px">
                            <label class="control-label" for="">文章封面:</label>
                        </div>
                        <div class="col-lg-6  col-sm-8 col-xs-7">
                            <input th:value="${article.coverImage}" type="text" class="form-control" name="coverImage" id="coverImage" placeholder="" require="">
                        </div>
                        <div class="col-sm-1 col-xs-1 jax-upload-btn">
                            <i class="fa fa-cloud-upload upload-img-btn"></i>
                        </div>
                    </div>
                    <div id="upload-content" class="upload-content form-group"></div>
                    <div id="sliderImgContent" th:class="${article.slider==1 ? 'form-group':'form-group display-none'}">
                        <div class="col-xs-1" style="width: 110px">
                            <label class="control-label" for="">轮播图:</label>
                        </div>
                        <div class="col-lg-6  col-sm-8 col-xs-7">
                            <input id="sliderImg" th:value="${article.sliderImg}" type="text" class="form-control" name="sliderImg" placeholder="轮播图地址（建议800*300）" require="">
                        </div>
                        <div class="col-sm-1 col-xs-1 jax-upload-btn">
                            <i class="fa fa-cloud-upload upload-slider-btn"></i>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-xs-1" style="width: 110px">
                            <label class="control-label" for="">是否轮播:</label>
                        </div>
                        <div class="tags col-xs-5 checkbox icheck">
                            <label>
                                <input th:field="*{article.slider}" class="minimal" type="radio"  name="slider"  value="1">是
                            </label>
                            <label>
                                <input th:field="*{article.slider}" class="minimal" type="radio"  name="slider"  value="0">否
                            </label>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-xs-1" style="width: 110px">
                            <label class="control-label" for="">是否置顶:</label>
                        </div>
                        <div class="tags col-xs-5 checkbox icheck">
                            <label>
                                <input th:field="*{article.top}" class="minimal" type="radio"  name="top"  value="1">是
                            </label>
                            <label>
                                <input th:field="*{article.top}" class="minimal" type="radio"  name="top"  value="0">否
                            </label>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-xs-1" style="width: 110px">
                            <label class="control-label" for="">是否推荐:</label>
                        </div>
                        <div class="tags col-xs-5 checkbox icheck">
                            <label>
                                <input th:field="*{article.recommended}" class="minimal" type="radio"  name="recommended"  value="1">是
                            </label>
                            <label>
                                <input th:field="*{article.recommended}" class="minimal" type="radio"  name="recommended"  value="0">否
                            </label>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-xs-1" style="width: 110px">
                            <label class="control-label" for="">开启评论:</label>
                        </div>
                        <div class="tags col-xs-5 checkbox icheck">
                            <label>
                                <input th:field="*{article.comment}" class="minimal" type="radio"  name="comment"  value="1">是
                            </label>
                            <label>
                                <input th:field="*{article.comment}" class="minimal" type="radio"  name="comment"  value="0">否
                            </label>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-xs-12">
                            <button type="button" onclick="saveArticle(0)" class="btn btn-primary">保存草稿</button>
                            <button type="button" onclick="saveArticle(1)"  class="btn btn-info ml25">发布文章</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</section>
<script>
    $("input[name=slider]").on('ifChecked', function(event){ //ifCreated 事件应该在插件初始化之前绑定
        var slider = $("input[name=slider]:checked").val();
        var sliderSize=$("#upload-content").find(".upload-slider-div").size();
        if(slider==1){
            $("#sliderImgContent").show();
            if(sliderSize==1){
                $(".upload-slider-div").show();
            }
        }else{
            $("#sliderImgContent").hide();
            if(sliderSize==1){
                $(".upload-slider-div").hide();
            }
        }
    });
    $('[type="checkbox"].minimal,input[type="radio"].minimal').iCheck({
        checkboxClass: 'icheckbox_minimal-blue',
        radioClass: 'iradio_minimal-blue',
    });
    var detailSimplemde = new SimpleMDE({
        // textarea的DOM对象
        element: document.getElementById("articleField"),
        // 自动下载FontAwesome，设为false为不下载(如果设为false则必须手动引入)
        autoDownloadFontAwesome: false,
        placeholder: "请输入文章内容",
        /*autosave: {
            // 启用自动保存功能
            enabled: true,
            // 自动保存的间隔，以毫秒为单位。默认为10000（10s）
            delay: 15000,
            // 唯一的字符串标识符(保证每个SimpleMDE编辑器的uniqueId唯一)
            uniqueId: "editor-2"
        },*/
        renderingConfig: {
            // 如果设置为true，将使用highlight.js高亮显示。默认为false
            codeSyntaxHighlighting: true
        },
        showIcons: ["code", "table", "clean-block", "horizontal-rule"],
        tabSize: 4,
        // 编辑器底部的状态栏
        status: true,
        status: [ "lines", "words"] // Optional usage
    });

    function  saveArticle(status) {
        if(validArticle()){
            Core.confirm("确认保存文章？",function () {
                $("#status").val(status);
                Core.postAjax("/article/edit",$("#articleForm").serialize(),function (data) {
                    if(data.status=200){
                        detailSimplemde.clearAutosavedValue();
                    }
                    layer.msg(data.msg)
                })
            })
        }
    }

    function  validArticle() {
        if(doValidForm(articleForm)){
            var contentMd=detailSimplemde.value();
            if(contentMd!=""){
                $("#articleContentMd").val(contentMd);
                $("#articleContent").val(detailSimplemde.markdown(contentMd));
                var tags =[];
                $('input[name="tag"]:checked').each(function(){
                    tags.push($(this).val());
                });
                if(tags.length>0){
                    return true;
                }else{
                    layer.msg("请选择文章标签！")
                }
            }else{
                layer.msg("请输入文章内容！")
            }
        }
        return false;
    }
    $(function () {

        /*上传图片*/
        $(".upload-img-btn").click(function(){
            if($("#upload-content").find(".upload-img-div").size()==0){
                var s=$("#upload-content").find(".upload-div").size()==0 ? ' upload-div-1">' : '">';
                var imgHtml = '<div class="col-md-3 col-sm-4 col-xs-6 upload-div upload-img-div'+s+
                    '<div class="upload-item">'+
                    '<p class="upload-title">封面图</p>'+
                    '<p class="upload-file"><i class="fa fa-cloud-upload fz-70"></i></p>'+
                    '<p class="upload-btns">'+
                    '<a type="button" class="btn btn-sm btn-block btn-info imgUploader">上传</a>'+
                    '</p>'+
                    '</div>'+
                    '</div>'
                $("#upload-content").append(imgHtml);
                $(".imgUploader").upload({
                    server : '[[@{/upload/upload}]]',
                    swf: 'http://p2blsey2s.bkt.clouddn.com/statics/upload/js/Uploader.swf',
                    imgAccept:true
                }, function(url, picker) {
                    $("#coverImage").val(url);
                    echoGtUploadResMethd(url,picker);
                });
            };
        })

        $(".upload-slider-btn").click(function(){
            if($("#upload-content").find(".upload-slider-div").size()==0){
                var s=$("#upload-content").find(".upload-div").size()==0 ? ' upload-div-1">' : '">';
                var imgHtml = '<div class="col-md-3 col-sm-4 col-xs-6 upload-div upload-slider-div'+s+
                    '<div class="upload-item">'+
                    '<p class="upload-title">轮播图</p>'+
                    '<p class="upload-file"><i class="fa fa-cloud-upload fz-70"></i></p>'+
                    '<p class="upload-btns">'+
                    '<a type="button" class="btn btn-sm btn-block btn-info sliderUploader">上传</a>'+
                    '</p>'+
                    '</div>'+
                    '</div>'
                $("#upload-content").append(imgHtml);
                $(".sliderUploader").upload({
                    server : '[[@{/upload/upload}]]',
                    swf: '/img/Uploader.swf',
                    imgAccept:true
                }, function(url, picker) {
                    $("#sliderImg").val(url);
                    echoGtUploadResMethd(url,picker);
                });
            };
        })
    })
    $(function () {
        //...
    })
</script>